<div id="affinity">
  <fieldset>
    <legend>
      <div class="row">
        <div class="large-12 columns">
          
              <h5 style="padding-bottom:0; margin-bottom:0;">
                {{tr "Role Affinity"}}
              </h5>
      </div>
    </div>
   </legend>
  <div class="row">
  	<div class="medium-3 columns">
    	<select multiple="true" size="3" class="select_role" id="list_roles_select" style="height: 100px; width: 90%; overflow: auto;"></select>
    </div>
    <div class="medium-1 columns"><br/></div>
    <div class="medium-4 columns" style="border-left:thin solid #ada8a8; text-align:center;">
      <label>{{tr "Affined"}}</label>
      <a class="small radius" id="tf_btn_host_affined">
        <i class="fas fa-lg fa-plus-circle"></i>
      </a>
      <div class="group_vm_roles_affined" id="group_vm_roles_affined"></div>
    </div>
    <div class="medium-4 columns" style="border-left:thin solid #ada8a8; text-align:center;">
      <label>{{tr "Anti Affined"}}</label>
      <a class="small radius" id="tf_btn_host_anti_affined">
        <i class="fas fa-lg fa-plus-circle"></i>
      </a>
      <div class="group_vm_roles_anti_affined" id="group_vm_roles_anti_affined"></div>
    </div>
  </div>
  </fieldset>
</div>